<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style type="text/css">
body{
	background-image:  url("images/banner.jpg");
	background-repeat:no-repeat ;
	background-size:100% 100%; 
	background-attachment: fixed;
			
}
.main{
	background-color: rgba(250,250,250,0.5);
	margin-top: 10%;
	height: 500px;
	border-radius: 10px;
}
.name{
  	background-color: rgba(170,170,170,0.5);
  	height: 60px;
  	border-radius: 10px 10px 0px 0px;
}
.ico{
	float: right;
	margin: 5px 10px 0px 0px;
}
.mesg{	
	height: 280px;
	border-bottom: 1px gray solid;
	overflow-y:scroll;
}
.util{

	/* border: 1px gray solid; */
}
.bianji{	
	height: 70px;
	background-color:#A3A3A2;
}
.botm{
	text-align: right;
	padding-right: 20px;
	padding-top: 5px;
}
.bianji{
	padding-left: 13px;
}
textarea{
	background-color: #A3A3A2;
	border: 0px; 
	resize:none;
}

</style>
</head>
<body onkeydown="doKeyDown()">
 <div class="layui-container">
 	<div class="layui-row">
		<div class="layui-col-md3">
		你的内容2/12
		</div>
		<div class="layui-col-md6">
		  <div class="main">	   
		       <div class="name">
		       <div class="layui-inline" style="margin-left: 20px;margin-top: 5px;">
  				<img src="images/张国荣1.jpg" class="layui-circle" width="50px;" height="50px;">
  				<span style="font-weight: bold;" id="uname">张国荣</span>								
				</div>
				<div class="ico">
					<a href=""><span style="font-size: 15px;">一</span></a>
					<a href=""><i class="layui-icon layui-icon-close" style="font-size: 30px;"></i></a>
					
				</div>	
			</div>
		     <div>		       
				<div class="mesg">
				   
				</div>
				<div class="util">
				<i class="layui-icon layui-icon-face-smile-b" style="font-size: 25px;"></i>
				<i class="layui-icon layui-icon-picture" style="font-size: 25px;"></i>
				<i class="layui-icon layui-icon-file" style="font-size: 25px;"></i>				
				<i class="layui-icon layui-icon-headset" style="font-size: 25px;"></i>
				<i class="layui-icon layui-icon-video" style="font-size: 25px;"></i>
				<i class="layui-icon layui-icon-fonts-code" style="font-size: 25px;"></i>
				</div>	
				<div>
				  <div class="bianji">
				  	<textarea rows="4" cols="75"  id="texarea"></textarea>
				  </div>
				  <div class="botm">
				  	<div class="layui-btn-container">
				  		<button type="button" class="layui-btn">
  						 关闭
						</button>
				  		<div class="layui-btn-group">	
  							<button type="button" class="layui-btn" id="btnsend">发送</button>
 							 <button type="button" class="layui-btn">
 							 	<i class="layui-icon layui-icon-down" style="font-size: 10px;"></i>
 							 </button>
						</div>
				  	</div>
				  </div>
				</div>				  
		      </div>		     
		   </div>
		  </div>
		<div class="layui-col-md3">
		你的内容 2/12
		</div>
	</div>
 </div>



<script src="js/jquery-1.10.2.js" charset="utf-8"></script>
<script>
//一般直接写在一个js文件中	
		var websocket; // 就是一个通信管道
		var userno=$("#uname").text();
	 // var userno=document.getElementById('userno').innerHTML;
     	var target = "ws://localhost:8080/PigTalk/echo/"+userno;//服务端的url，注意以ws开头
      $(function () {					
			alert(userno);
			openWeb();
			$("#btnsend").click(function () {
				send();
				
			});
			websocket.onmessage = function (event) {
				 var now=getNowFormatDate();//获取当前时间
	        	$(".mesg").append('<div class="sendmsg" style="height: 50px;padding-top: 5px;">'
		 			     +'<div style="text-align:center;font-size: 12px;">'+now+'</div><div id="usend" style="text-align: left;padding-left: 15px;">'				     
					     +'<img src="images/陈奕迅3.jpg" class="layui-circle" width="30px;" height="30px;">'
					     +'<span style="font-weight: bold;" id="uname">'+event.data+'</span></div></div>');
	        	var showContent = $(".mesg");
	        	showContent[0].scrollTop = showContent[0].scrollHeight;
	        }
			//连接关闭的回调方法
	  	    websocket.onclose = function () {
	  	       alert("关闭");
	  	    };
			
      });    	
     	function openWeb() {
     		if('WebSocket' in window){  	 
     	    	  websocket = new WebSocket(target);
     	      }else if('MozWebSocket' in window){
     	    	  websocket = new MozMozWebSocket(target);
     	      }else{
     	          alert("WebSocket is not supported by this browse");
 				return;    	         
     	      } ;  
     	     websocket.onopen=function () {
   	          alert("WebSocket连接成功");
   	      };
		};
	//发送消息	    
	     function send() {
	          var message =$("#texarea").val();
	          if(message==""){
	        	  alert("不能发送空的消息!");
	        	  return ;
	          }//要发送的消息内容
	          var now=getNowFormatDate();//获取当前时间
	          $(".mesg").append('<div class="sendmsg" style="height: 50px;padding-top: 5px;">'
	 			     +'<div style="text-align:center;font-size: 12px;">'+now+'</div><div id="usend" style="text-align: right;padding-right: 15px;">'
				     +'<span style="font-weight: bold;" id="uname">'+message+'</span>'
				     +'<img src="images/张国荣1.jpg" class="layui-circle" width="30px;" height="30px;"></div></div>');	          
	          var ToSendUserno="陈奕迅"; //接收人编号：4567
	          message=message+"|"+ToSendUserno//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
	          websocket.send(message); 
	          $("#texarea").val("");
	          var showContent = $(".mesg");
	        	showContent[0].scrollTop = showContent[0].scrollHeight;
	     };
	   //获取当前时间
	      function getNowFormatDate() {
	          var date = new Date();
	          var seperator1 = "-";
	          var seperator2 = ":";
	          var month = date.getMonth() + 1;
	          var strDate = date.getDate();
	          if (month >= 1 && month <= 9) {
	              month = "0" + month;
	          }
	          if (strDate >= 0 && strDate <= 9) {
	              strDate = "0" + strDate;
	          }
	          var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
	                  + " " + date.getHours() + seperator2 + date.getMinutes()
	                  + seperator2 + date.getSeconds();
	          return currentdate;
	  		}   ;
	  		
	  		function doKeyDown() 
	  	    { 
	  	        if ( event.keyCode == 13) 
	  	        { 
	  	        	send();
	  	          //这里实现鼠标点击的效果，不知道你要实现什么效果？ 
	  	        } 
	  	    } 
	  	 
	  	    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
	  	    window.onbeforeunload = function () {
	  	        closeWebSocket();
	  	    };
	  	    //关闭WebSocket连接
	  	    function closeWebSocket() {
	  	        websocket.close();
	  	    }; 
</script> 
</body>
</html>